import { useDeferredValue, useEffect, useInsertionEffect, useMemo } from "react";
import { useState, useRef, useLayoutEffect } from "react";
import axios from "axios";
import './App.scss'
import List from "./20-List";

function App(){
  const [str,setStr]=useState('')

  //延期更新数据
  const deferredValue=useDeferredValue(str)
  const MemoList=useMemo(()=>{
    return <List str={deferredValue}></List>
  },[deferredValue])

  return (
    <div>
      <h1 className="rotate">APP</h1>
      <input type="text" value={str} onChange={(e)=>{
        setStr(e.target.value)
      }}/>
      {/* <List str={deferredValue}></List> */}
      {/* MemoList只是一个函数，不是组件直接用，需要用{}包起来，他的返回值是一个组件 */}
      {MemoList}
    </div>
  );
}

export default App;
